<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的基本使用</title>
</head>
<body>
   <input type="button" id="btn" value="点我">
   <br>
   <input type="button" id="btn1" value="解绑事件">
   <br>
   <input type="text" id="input">
   <br>
   <div id="div" style="border:1px solid black">div</div>
</body>
<!--JQuery的引入-->
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //单击事件
   /* $("#btn").click(function () {
        alert("点我干嘛");
    });
*/

   /* $("#input").focus(function () {
        alert("获取到焦点了")
    });
*/

    $("#input").blur(function () {
        alert("失去焦点了")
    });

    //jQuery 对象.on(事件名称,执行的功能);----绑定事件
    $("#btn").on("click",function () {
        alert("点我干嘛")
    });

    ///jQuery 对象.off(事件名称); ---解绑事件
    //如果不指定事件名称，则会把该对象绑定的所有事件都解绑
    $("#btn1").on("click",function () {
        $("#btn").off("click");
    });

    /*事件的切换：需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系。

   方式一：单独定义

  $(元素).事件方法名1(要执行的功能);

  $(元素).事件方法名2(要执行的功能); */
   //单独定义
   /* $("#div").mouseover(function () {
        $(this).css("background", "red");
    });
    $("#div").mouseout(function () {
        $(this).css("background", "blue");
    });*/
    //链式定义
    $("#div").mouseover(function () {
        $(this).css("background", "red");
    }).mouseout(function () {
        $(this).css("background", "blue");
    })
</script>
</html>